<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
			<el-button type="primary" size="small" @click="add">
				<template #default>
					<span class="text-sm">{{ $t('machine.trade.add') }}</span>
				</template>
			</el-button>
			<el-button v-prmis="'machine_on_off_importCkc'" type="primary" size="small" @click="tradexcel(3)">
				<template #default>
					<span class="text-sm">{{ $t('machine.trade.importBusiness') }}</span>
				</template>
			</el-button>
			<el-button v-prmis="'machine_on_off_importOnOff'" type="primary" size="small" @click="tradexcel(4)">
				<template #default>
					<span class="text-sm">{{ $t('machine.trade.importTimed') }}</span>
				</template>
			</el-button>
			<el-button v-prmis="'machine_on_off_exportOnOff'" type="primary" size="small" @click="gettradexcel">
				<template #default>
					<span class="text-sm">{{ $t('machine.trade.businessExport') }}</span>
				</template>
			</el-button>
		</div>
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" height="700">
				<el-table-column prop="machine_id" :label="$t('machine.code')">
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="machine_name" :label="$t('machine.name')">
					<template #default="scope">
						{{ scope.row.machine_name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="machine_name" :label="$t('machine.trade.switchApp')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="danger">{{ $t('public.disable') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="on_off_machine" :label="$t('machine.trade.switchConfig')">
					<template #default="scope">
						<el-link type="primary" :underline="false"
							@click="getonoff(2, scope.row.on_off_machine, scope.row)">{{ $t('public.view') }}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="on_off_ckc" :label="$t('machine.trade.businessConfig')">
					<template #default="scope">
						<el-link type="primary" :underline="false"
							@click="getonoff(1, scope.row.on_off_ckc, scope.row)">{{ $t('public.view') }}</el-link>
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button size="small" type="primary" @click="modify(scope.row)">{{ $t('public.modify')
							}}</el-button>
						<el-button v-prmis="'machine_on_off_del'" size="small" type="danger"
							@click="del(scope.row.moo_id)">{{ $t('public.del') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.trade" @exposeData="current" @fraction="fraction" />
		</div>
		<!-- 弹窗 -->
		<el-dialog v-model="data.tradestatus" :title="data.title" center :width="data.type >= 3 ? '20%' : '40%'">
			<tradelist v-if="data.type == 1 || data.type == 2" :week="data.week" :type="data.type"
				@tradebtn="cleanup" />
			<tradeade v-if="data.type == 3" @exposeData="gettrad" />
			<trademac v-if="data.type == 4" @exposeData="gettrad" />
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import tradelist from '../common/trade_list.vue';
import tradeade from '../common/trade_ade.vue';
import trademac from '../common/trade_mac.vue';
import { getonoffList, updateonoff, delonoff, exportOnOffonoff } from '@/api/machine_trade';
import { useRouter } from "vue-router";
import exports from '@/components/export.vue';
import { ElMessage, ElMessageBox } from "element-plus";
const dialogExport = ref(false)
const router = useRouter()
let data = reactive({
	mtloading: false, // 加载
	tradestatus: false, // 弹窗
	title: '', // 弹窗标题
	type: 0, // 1开关机，2营业配置，3导入营业配置
	info: '', // 修改数据
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('machine.name'), type: 'input', value: '', key: 'machine_name' }
	],
	list: [], // 列表信息
	week: [], // 周期
	trade: { // 筛选数据
		m_id: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getonoffList(data.trade).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.trade[key] = e[key]
	}
	data.trade.page = 1
	data.trade.pageNum = 15
	getlist()
}

// 添加配置
let add = () => {
	router.push({ path: '/machine/trade/add_info' })
}

// 修改配置
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/machine/trade/details_info', query: query })
}

// 删除配置
let del = (e) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			delonoff({ moo_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 查看营业配置/开关机配置
let getonoff = (e, k, l) => {
	let name = $t('machine.trade.businessConfig')
	data.week = [
		{ label: $t('mock.Monday'), open: '', close: '' },
		{ label: $t('mock.Tuesday'), open: '', close: '' },
		{ label: $t('mock.Wednesday'), open: '', close: '' },
		{ label: $t('mock.Thursday'), open: '', close: '' },
		{ label: $t('mock.Friday'), open: '', close: '' },
		{ label: $t('mock.Saturday'), open: '', close: '' },
		{ label: $t('mock.Sunday'), open: '', close: '' },
	]

	if (k != '') {
		let time = JSON.parse(k)

		for (let key in time) {
			let arr = time[key].split(',')
			data.week[key].open = arr[0]
			data.week[key].close = arr[1]
		}
	}
	if (e == 2) {
		name = $t('machine.trade.switchConfig')
	}
	data.info = l
	data.tradestatus = true
	data.title = name
	data.type = e

}

// 清除配置
let cleanup = () => {
	let obj = {
		moo_id: data.info.moo_id,
		status: data.info.status,
		on_off_ckc: data.info.on_off_ckc,
		on_off_machine: data.info.on_off_machine,
	}

	if (data.type == 1) {
		obj.on_off_ckc = ''
	} else {
		obj.on_off_machine = ''
	}

	ElMessageBox.confirm($t('message.clearData'))
		.then(res => {
			updateonoff(obj).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.modify'),
						type: 'success'
					})
					data.tradestatus = false
					data.type = 0
					getlist()
				}
			})
		}).catch(err => {
			console.log('取消')
		})

}

// 导入营业配置excel表
let tradexcel = (e) => {
	data.type = e

	if (e == 3) {
		data.title = $t('machine.trade.import')
	}

	if (e == 4) {
		data.title = $t('machine.trade.importPwer')
	}

	data.tradestatus = true

}

// 关闭弹窗
let gettrad = () => {
	data.tradestatus = false
	data.type = 0
}

// 导出营业配表
let gettradexcel = () => {
	let obj = {
		machine_id: data.trade.machine_id
	}
	ElMessageBox.confirm($t('message.exportBus')).then(res => {
		exportOnOffonoff(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	})
}

// 页数回调
let current = (e) => {
	data.trade.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.trade.pageNum = e
	getlist()
}

getlist()

</script>